<template>
	<basic-container>
		<avue-crud :option="option" :data="data" ref="crud" @expand-change="expandChanges" :table-loading="loading"
		:permission="permissionList" :page="page" @refresh-change="refreshChange" @search-change="searchChange"
		@search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
			<template slot="expand" slot-scope="{row}">
				<avue-crud ref="crud" :option="option1"  v-if="row.orderFormGoods.length>0" :data="row.orderFormGoods"  :row-style="rowStyle">
					<template slot-scope="{row}" slot="goodsMainPhotoUrl">
						<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
					</template>
				</avue-crud>
				<div v-else class="loading_icon">
					<i class="el-icon-loading"></i>
				</div>
			</template>
			<template slot-scope="scope" slot="menu">
				<el-button type="text" v-if="scope.row.status!=-1 &&scope.row.status!=30" size="small" @click="closeService(scope.row.id,scope.row.serviceSn)">关闭售后单</el-button>
				<el-button type="text" v-if="scope.row.status==21" size="small" @click="sendMoney(scope.row.id)">确认收货并打款</el-button>
				<el-button type="text" v-if="scope.row.status==21" size="small" @click="delayedReceipt(scope.row.id)">延迟收货</el-button>
				<el-button type="text" v-if="scope.row.status==0" size="small" @click="checkService(scope.row.serviceSn,scope.row.id)">审核</el-button>
				<el-button type="text" size="small" @click="viewDetail(scope.row.id)">查看详情</el-button>
			</template>
			<!-- 自定义添加搜索条件  按日期搜索  -->
			<template slot="search">
				<el-col :md="12" :xs="24" style="float: left;width: 50%;">
					<el-form-item label="申请日期" style="width: 50%;display: inline-block;">
						<el-date-picker size="mini" placeholder="开始时间" @change="getTime(0)" value-format="yyyy-MM-dd HH:mm:ss" v-model="beginTime" type="datetime">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="至" style="width: 50%;display: inline-block;">
						<el-date-picker size="mini" placeholder="结束日期" @change="getTime(1)" value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" type="datetime">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</template>
		</avue-crud>
		<el-dialog title="商家退货操作" :visible.sync="sendDialogVisible" width="40%" :before-close="closeDia">
			<avue-form ref="formSend" :option="optionSend" v-model="formSend" @submit="submit">
			</avue-form>
		</el-dialog>
		<el-drawer title="售后单详情" :visible.sync="dialogDeatilVisible" :before-close="closeDetailDialog" size="60%" :with-header="false">
			<avue-form ref="detailRef" :option="optionDetail" v-model="form1">
				<template slot="group1Header">
					<h4>售后单详情</h4>
				</template>
				<!-- <template slot="group2Header">
					<h4>卖家信息</h4>
				</template> -->
				<template slot="group3Header">
					<h4>售后单信息</h4>
				</template>
				<template slot="group4Header">
					<h4>收货地址</h4>
				</template>
				<template slot="group5Header">
					<h4>物流信息</h4>
				</template>
				<template slot="group6Header">
					<h4>退换货提交信息</h4>
				</template>
				<template slot="group7Header">
					<h4>操作历史</h4>
				</template>
				<template slot-scope="scope" slot="menuForm">
					<el-button @click="closeDetailDialog">关闭</el-button>
				</template>
				<template slot-scope="scope" slot="goodsDetails">
					<avue-crud :data="form1.goodsDetail" :option="option1">
						<template slot-scope="{row}" slot="goodsMainPhotoUrl">
							<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
						</template>
					</avue-crud>
				</template>
				<template slot-scope="scope" slot="images">
					<div>
						<el-image v-for="(item,index) of form1.applicationImgJson" :preview-src-list="form1.applicationImgJson" :key='item.index' :src="item" style="width:100px;height:100px;margin-right: 10px;" />
					</div>
					
				</template>
				<template slot-scope="scope" slot="history">
					<div style="padding: 0.2rem;">
						<p v-for="item of form1.asLogsResult" :key="item.index">
							<!-- <span style="padding: 0 0.1rem;">{{item.stateInfo}}：</span> -->
							<span style="color: #ff9900;padding: 0 0.2rem;">{{item.buyerName}}{{item.storeName}}</span>
							<span style="padding: 0 0.1rem;">于
								<span style="padding: 0 0.2rem;">{{item.addTime}}</span>
								<span style = 'word-break: break-all'>{{item.content}}</span>
							</span>
						</p>
					</div>
				</template>
				
				<template slot-scope="scope" slot="expressInfo">
					<div v-if="form1.expressInfo">
						<p>物流公司：{{form1.companyName}}</p>
						<p>物流单号：{{form1.expressNu}}</p>
						<div v-if="form1.expressInfo.length==0">
							<span class="noExpressInfo">{{form1.message}} ！！</span>
						</div>
						<div v-else>
							<el-steps direction="vertical" :active="form1.expressInfo.length" >
								<el-step v-for="obj of form1.expressInfo" :key="obj.index" icon="el-icon-success" style="padding: 0.2rem;" :description="obj.time+obj.context"></el-step>
							</el-steps>
						</div>
						
					</div>
				</template>
			</avue-form>
		</el-drawer>
	</basic-container>
</template>

<script>
	import {
		getList,
		confirmReceiving,
		cancelService,
		delayReceiving,
		approveAfterSale,
		serviceDetail,
		getOrderGoodsDetail
	} from "@/api/order/seller/orderAfterSaleService";
	import {
		mapGetters
	} from "vuex";
	var Dict = JSON.parse(localStorage.getItem("mall-dictionary")).content;
	var VAILD = [{
		label: '通过',
		value: 'true'
	}, {
		label: '拒绝',
		value: 'false'
	}]
	Dict.payWayEnum.splice(4, 1);
	Dict.payWayEnum.push({value:5,label:'无'});
	export default {
		data() {
			return {
				sendBtn:true,
				form: {},
				form1: {},
				formSend: {},
				obj: {},
				query: {},
				beginTime: '',
				endTime: '',
				sendDialogVisible: false,
				dialogDeatilVisible: false,
				loading: true,
				rolesTree: [],
				rolesKeys: [],
				box: false,
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 1,
					pageSizes: [10, 20, 30, 40], //默认
				},
				data: [],
				//售后单详情
				optionDetail: {
					submitBtn: false,
					emptyBtn: false,
					menuAlign: "right",
					group: [{
						prop: 'group1',
						column: [{
							label: '订单编号',
							prop: 'orderId',
							disabled:true,
						}, {
							label: '下单时间',
							prop: 'oPayTime',
							disabled:true,
						}, {
							label: '支付方式',
							prop: 'payWay',
							type: 'select',
							dicData:Dict.payWayEnum,
							disabled:true,
						}]
					},
					{
						prop: 'group3',
						column: [{
							label: '售后单号',
							prop: 'serviceSn',
							disabled:true,
						}, {
							label: '生成时间',
							prop: 'addTime',
							disabled:true,
						}, {
							label: '售后单状态',
							row: true,
							prop: 'status',
							disabled:true,
							type: 'select',
							dicData: Dict.orderAfterSaleStatusEnum,
						}, {
							label: '宝贝详情',
							row: true,
							span: 24,
							prop: 'goodsDetails',
							formslot: true,
						}]
					}, { //收货地址
						prop: 'group4',
						column: [{
							label: '收货人',
							prop: 'trueName',
							disabled:true,
						},{
							label: '电话号码',
							prop: 'mobile',
							disabled:true,
						}, 
						{
							label: '收货人电话',
							prop: 'address',
							disabled:true,
						}, {
							label: '详细地址',
							prop: 'areaInfo',
							disabled:true,
							span: 24
						}, ]
					}, {
						prop: 'group5',
						column: [{
							prop: 'expressInfo',
							span:24,
							formslot: true,
						}, ]
					}, {
						prop: 'group6',
						column: [{
							label:'提交原因',
							prop: 'applicationReasons',
							disabled:true,
						},{
							label:'问题描述',
							prop: 'applicationContent',
							disabled:true,
						},{
							label:'图片信息',
							prop: 'images',
							span:24,
							formslot: true,
						}, ]
					},{ //操作历史
							prop: 'group7',
							column: [{
								prop: 'history',
								formslot: true,
								span: 24
							}]
						}
					]
				},
				optionSend: {
					emptyBtn: false,
					submitBtn: true,
					column: [{
						label: "售后单号",
						prop: "serviceSn",
						span: 24,
						readonly: true,
						row: true,
					}, {
						label: "备注",
						prop: "content",
						span: 24,
						maxlength: 100,
						tip:'100字以内',
						type: 'textarea',
						row: true,
					}, {
						label: "审核状态",
						prop: "status",
						row: true,
						type: 'radio',
						dicData: VAILD,
						span: 18,
						rules: [{
							required: true,
							message: "请选择审核状态",
							trigger: "blur"
						}],
					}, ]
				},
				//宝贝详情
				option1: {
					border: true,
					header: false,
					menu: false,
					size: 'mini',
					align: 'center',
					menuAlign: 'right',
					column: [{
						label: '宝贝图片',
						prop: 'goodsMainPhotoUrl',
						width: 100,
						slot: true,
					}, {
						label: '宝贝简介',
						align: 'left',
						prop: 'goodsName'
					}, {
						label: '规格',
						width:150,
						prop: 'specInfo',
					}, {
						label: '单价',
						width: 80,
						prop: 'price'
					}, {
						label: '数量',
						width: 80,
						prop: 'serviceCount'
					}]
				},
				option: {
					size: 'mini',
					expand: true,
					expandRowKeys: [],
					align: 'center',
					menuAlign: 'center',
					border: true,
					rowKey: 'id',
					defaultExpandAll: false,
					height: 'auto',
					// // calcHeight: 380,
					menuWidth: 300,
					search: true,
					searchMenuSpan:6,
					addBtn: false,
					editBtn: false,
					delBtn: false,
					viewBtn: false,
					column: [{
							label: "订单号",
							prop: "orderSn",
							hide:true,
							search: true,
						},{
							label: "售后单号",
							prop: "serviceSn",
							search: true,
						},
						{
							label: "收货人电话",
							prop: "addressMobile",
							searchLabelWidth:100,
							search: true,
							width:120,
						},
						{
							label: "申请日期",
							prop: "addTime",
							width:300,
						}, {
							label: "实际退款",
							prop: "actualPrice",
							width:100,
						},
						{
							label: "售后单状态",
							searchLabelWidth: 100,
							searchSpan: 6,
							prop: "status",
							width:120,
							type: 'select',
							search: true,
							props: {
								label: 'label',
								value: 'value'
							},
							dicData: Dict.orderAfterSaleStatusEnum,
						}
					]
				},
			};
		},
		computed: {
			...mapGetters(["permission", 'userInfo']),
			permissionList() {
				return {

				};
			},
		},

		methods: {
			getTime(type) {
				if(this.beginTime&&type==1){//先输入开始时间 后输入结束时间
					if (this.beginTime > this.endTime) {
						this.$message({
							type: "error",
							message: "结束时间不能小于开始时间"
						});
						this.endTime = ''
					}
				}else if(this.endTime&&type==0){//先输入结束时间 后输入开始时间
					if (this.beginTime > this.endTime) {
						this.$message({
							type: "error",
							message: "开始时间不能大于结束时间"
						});
						this.beginTime = ''
					}
				}
			},
			viewDetail(id){
				serviceDetail(id).then((res) => {
					console.log(res)
					if (res.data.code != 200) {
						return;
					}
					var data=res.data.data
					this.form1.id=data.orderAfterSale.id
					this.form1.orderId=data.orderForm.orderId
					this.form1.oPayTime=data.orderForm.addTime	
					this.form1.payWay=data.orderForm.payWay
					// this.form1.storeName=data.orderForm.storeName
					// this.form1.sellerPhoneNumber=data.orderForm.sellerPhoneNumber
					// this.form1.sellerAddress=data.orderForm.sellerAddress
					this.form1.serviceSn=data.orderAfterSale.serviceSn
					this.form1.addTime=data.orderAfterSale.addTime
					this.form1.status=data.orderAfterSale.status
					this.form1.goodsDetail=[]
					this.form1.goodsDetail.push(data.orderAfterSale.orderFormGoodsResult)    
					this.form1.trueName=data.orderAddressList[0].trueName
					// this.form1.zip=data.orderAddressList[0].zip
					this.form1.address=data.orderAddressList[0].provinceAreaName+data.orderAddressList[0].cityAreaName+data.orderAddressList[0].countyAreaName
					this.form1.areaInfo=data.orderAddressList[0].areaInfo
					this.form1.mobile=data.orderAddressList[0].mobile
					this.form1.applicationContent=data.orderAfterSale.applicationContent
					this.form1.applicationReasons=data.orderAfterSale.applicationReasons
					this.form1.applicationImgJson=data.imgList
					this.form1.asLogsResult=data.asLogsResult
					console.log(this.form1.goodsDetail)
					if(data.expressInfo){
						this.form1.expressInfo=data.expressInfo.data
						this.form1.message=data.expressInfo.message
						this.form1.companyName=data.expressInfo.companyName
						this.form1.expressNu=data.expressInfo.nu
						if(this.form1.expressNu==''){
							this.form1.expressNu=data.orderAfterSale.buyerRefundExpressSn
						}
					}
						this.dialogDeatilVisible = true
				});
			},
			//审核售后单
			checkService(sn,id) {
				this.formSend.serviceSn = sn;
				this.formSend. afterSaleId = id;
				this.sendDialogVisible = true
			},
			//同意退货
			submit(form,done) {
				approveAfterSale(this.formSend).then((res) => {
					if( res.data.code == 200){
						this.onLoad(this.page, this.query)
						this.$message({
							type: "success",
							message: "审核成功!"
						});
						done();
						this.$refs.formSend.resetForm();
						this.sendDialogVisible = false
					}else{
						this.$message({
							type: "error",
							message: res.data.message
						});
					}
					this.option.expandRowKeys = []
				});
			},
			closeDia(done){
				this.$refs.formSend.resetForm();
				this.sendDialogVisible = false
				done();
			},
			//关闭售后单
			closeService(id,serviceSn) {
				var mes="确定关闭售后单"+serviceSn+'吗？'
				this.$confirm(mes, {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						cancelService(id).then((res) => {
							console.log(res)
							if (res.data.code != 200) {
								return;
							}
							this.onLoad(this.page, this.query)
							this.option.expandRowKeys = []
							this.$message({
								type: "success",
								message: "关闭售后单成功!"
							});
						});
					})
			},
			//确认收货并打款
			sendMoney(id) {
				if(this.sendBtn){
					this.sendBtn = false;
				}
				this.$confirm("确定收到货物并且打款吗?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						confirmReceiving(id).then((res) => {
							console.log(res)
							if (!res.data.success) {
								this.sendBtn = true;
								let msg=res.data.message+",打款失败 !"
                                this.$message.error(msg);
								return;
							}else{
								this.onLoad(this.page, this.query)
								this.$message.success(res.data.message);
							}
							
						});
					})
			},
			
			//延迟收货
			delayedReceipt(id) {
				this.$confirm("最长延迟收货5天，确定要进行延迟收货吗?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						delayReceiving(id).then((res) => {
							console.log(res)
							if (res.data.code == 200) {
								this.$message({
									type: "success",
									message: "延迟收货成功!"
								});
							}else{
								this.$message.error(res.data.message);
							}
							this.onLoad(this.page, this.query)
							
						});
					})
			},
			closeDetailDialog(){
				this.dialogDeatilVisible=false;
				this.$refs.detailRef.resetForm()
				this.$refs.detailRef.clearValidate()
				localStorage.removeItem("afterSaleServiceDetailId");
			},
			rowStyle() {
				return {
					backgroundColor: '#f3f3f3',
					color: '#333333'
				}
			},
			expandChanges(row, expendList) {
				console.log("111111111111111111111111111111")
				if(row.orderFormGoods.length>0){
					return;
				}
				let obj ={
					id:row.orderGoodsId,
					serviceId:row.id,
				}
				getOrderGoodsDetail(obj).then((res) => {
					row.orderFormGoods = [];
					row.orderFormGoods.push(res.data.data);
				});
				console.log(row)
				console.log(expendList)
				//this.$message.success('展开回调')
			},
			searchReset() {
				this.query = {};
				this.beginTime=''
				this.endTime=''
				this.onLoad(this.page);
			},
			searchChange(params,done) {
				this.page.currentPage = 1
				params.addTimeBegin = this.beginTime
				params.addTimeEnd = this.endTime
				this.option.expandRowKeys=[]
				this.query = params;
				this.onLoad(this.page, params,done);
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			refreshChange() {
				this.sendBtn=true
				this.option.expandRowKeys=[]
				this.onLoad(this.page);
			},
			onLoad(page, params = {},done) {
				this.loading = true;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					if(done){
						done();
					}
					this.loading = false;
					const data = res.data;
					this.page.total = data.count;
					if(data.data.length>0){
						data.data.forEach(item=>{
							item.orderFormGoods=[]
							/*item.orderFormGoods.push(item.orderFormGoodsResult)*/
						})
					}
					
					this.data = data.data;
					console.log(this.data);
					var passId=localStorage.getItem("afterSaleServiceDetailId");
					if(passId){
						this.viewDetail(passId);
					}
				});
			}
		}
	};
</script>

<style scoped>
	.noExpressInfo{
		margin: 10px 10px 10px 0px;
		color: #909399;
	}
	.loading_icon {
		width:30px;
		margin:auto;
	}
</style>
